Getting predictwhy.com live.

A 20-minute setup: deploy the static site, wire the survey to Google Sheets, point the domain. No servers, no costs.

The fastest path: Netlify drop-zone.

The whole site is plain HTML files. Any static host works (Netlify, Vercel, Cloudflare Pages, GitHub Pages, S3). Netlify's drag-and-drop is the simplest — no command line, no Git account required.

1. Download the project folder. All HTML files plus deck-stage.js. Keep the file names exactly as they are — links inside the pages reference them.

2. Go to app.netlify.com/drop (it's a no-signup drop zone for instant deploys). Drag your folder onto the page. You get a free .netlify.app URL in ~30 seconds.

3. Verify everything works using the Netlify URL before pointing the real domain. Test the survey, click through the deck, open the annexures.

4. Connect predictwhy.com. In Netlify → Site settings → Domain management → Add custom domain → predictwhy.com. Netlify gives you DNS instructions. Go to wherever you bought the domain (Namecheap, GoDaddy, etc.) and update the nameservers OR add the A/CNAME records Netlify lists. HTTPS is automatic via Let's Encrypt.

   If you'd rather use Cloudflare Pages or Vercel, the process is essentially identical. I'd avoid GitHub Pages because of the spaces in filenames — it works, but URLs get ugly.

URL structure once live

Pretty URLs are optional — Netlify supports them via a _redirects file. If you want clean URLs, ask me and I'll generate the redirects file. The default file paths with %20 spaces work fine.

5 minutes. Free forever. Data lands in your spreadsheet.

The survey already saves locally to each respondent's browser. To collect responses centrally, we'll wire it to a Google Apps Script Web App that appends one row per answer-event to a Google Sheet you own. Each row carries the respondent ID, question, value, and a precise timestamp — so you'll see not just what they answered, but when and in what order.

1. Create a new Google Sheet. Name it something like Predict The Why — Survey Responses. In Row 1, add these headers exactly:

   timestamp  ·  respondent_id  ·  qid  ·  value  ·  started_at  ·  user_agent

2. Open Apps Script. In the sheet, click Extensions → Apps Script. A code editor opens in a new tab.

3. Paste this code. Replace whatever's in Code.gs with the script below.

   Copy

   // Apps Script: append each survey event as a row in the sheet.
   // Triggered by POSTs from Survey.html — one POST per answer change.
   
   function doPost(e) {
     try {
       const body = JSON.parse(e.postData.contents);
       const sheet = SpreadsheetApp.getActiveSheet();
   
       const value = Array.isArray(body.value)
         ? body.value.join(' | ')
         : String(body.value == null ? '' : body.value);
   
       sheet.appendRow([
         body.at || new Date().toISOString(),
         body.respondentId || '',
         body.qid || '',
         value,
         body.startedAt || '',
         body.userAgent || ''
       ]);
   
       return ContentService
         .createTextOutput(JSON.stringify({ ok: true }))
         .setMimeType(ContentService.MimeType.JSON);
     } catch (err) {
       return ContentService
         .createTextOutput(JSON.stringify({ ok: false, error: String(err) }))
         .setMimeType(ContentService.MimeType.JSON);
     }
   }
   
   // Health check (visit the URL in a browser to verify deployment)
   function doGet() {
     return ContentService
       .createTextOutput('Predict The Why survey endpoint is live.');
   }

4. Deploy as Web App. Top right → Deploy → New deployment → gear icon → choose Web app. Set:

   • Execute as: Me
   • Who has access: Anyone

   Click Deploy. Google will ask for permission to access your sheet — approve it. You'll get a long URL ending in /exec. That's your endpoint. Copy it.

5. Paste the URL into Survey.html. Near the top of the script block:

   Copy

   // BACKEND CONFIG — paste your Google Apps Script Web App URL here
   const BACKEND_URL = 'https://script.google.com/macros/s/AKfy.../exec';

   Re-deploy the static site (Netlify drag-and-drop again, or push to Git). Done.

6. Test end-to-end. Open the live survey, change a few answers, then check your Google Sheet — rows should appear within seconds. The bottom-right of the survey shows a sync indicator: local-only / syncing… / synced / queued.

   If a respondent loses internet mid-survey, the survey queues events locally and retries when they're back online. No data is lost.

Updating the Apps Script later

When you change Code.gs, you must Deploy → Manage deployments → Edit (pencil) → New version → Deploy. Otherwise the live URL still serves the old code. The URL itself stays the same.

If you prefer something else.

Formspree (email-based, simple)

If you'd rather receive emails per response instead of writing to a sheet, sign up at formspree.io, get a form ID, and change the postOne function in Survey.html to POST to https://formspree.io/f/<your-form-id> as JSON with mode: 'cors'. Free tier: 50 submissions/month — fine for the 30–50 target, but you'll hit the cap if everyone changes many answers.

Tally.so or Typeform (replace the survey entirely)

If you'd rather use a hosted form builder, embed it as an iframe in Survey.html. You lose the per-event timestamp data and the bespoke design, but gain a polished response dashboard.

Before you share the URL.

• Visit every page on the live URL — open from a phone too.
• Take the survey end-to-end. Check rows land in your sheet with correct timestamps.
• Verify the timeline shows the correct "NOW" position for today's date.
• Test the Interactive Interview from welcome to closing.
• Print/save the Full Report to PDF — confirm formatting holds.
• Confirm HTTPS is on (padlock in browser).
• Share predictwhy.com with one friend; ask them to try the survey before the wider launch.

When you're ready to update anything — copy the html file you want to change, edit it, and re-drop the folder onto Netlify. Whole process takes under a minute.